<script setup lang="ts">
import { onMounted, ref } from "vue"
import { CommentApi, OrganizationApi, ContactApi } from "@/api/crm"
import router from "@/router"

defineOptions({
  name: "Contact"
})

const contactList = ref()
/**添加联系人 */
const drawRef = ref()
const addContact = () => {
  drawRef.value.show = true
}
// const submit = () => {
//   ContactApi.addComment(commentForm.value)
//   commentForm.value = commentDefaultForm
//   getDisplayData()
// }

/**动态索引部分，key值 */
// enum actionKey {
//   organization = "organization"
// }
// interface OpInterface {
//   promptMsg: string
//   promptTitle: string
//   // api: object
//   // key: string
//   successAction: any // 有点疑惑，用object就会报错
// }
// const quickAdd = (e: keyof typeof actionKey) => {
//   ElMessageBox.prompt(action[e].promptMsg, action[e].promptTitle, {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消"
//     // inputPattern:
//     //   /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
//     // inputErrorMessage: 'Invalid Email',
//   })
//   .then(async ({ value })  => {
//     action[e].successAction(value)
//   })
//   .catch(() => {
//     ElMessage({
//         type: "info",
//         message: "已取消添加"
//       })
//   })
// }

const contactForm = {
  name: "",
  cellphone: "",
  organization: "",
  other: ""
}
const contactListInfo = ref({
  total: 0,
  pageSize: 5,
  currentPage: 1
})
/**进入详细信息页 */
const goDetail = (id: string) => {
  // console.log(scope);
  router.push({ path: "/crm/contact/detail", query: { id } })
}
/**获取联系人列表 */
async function getContactList(page = 1) {
  let resp = await ContactApi.getContactPageList({ page })
  contactList.value = resp.data.result
  contactListInfo.value.total = resp.data.total
  contactListInfo.value.pageSize = resp.data.pageSize
  contactListInfo.value.currentPage = resp.data.currentPage
}
const handlePageChange = (page: number) => {
  console.log(page)
  getContactList(page)
}
onMounted(() => {
  getContactList()
})
</script>

<template>
  <div class="layout-container">
    <el-card>
      <el-button type="primary" @click="addContact">添加</el-button>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-table :data="contactList">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column label="姓名">
          <template #default="scope">
            <el-link type="primary" @click="goDetail(scope.row.id)">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="organization" label="工作单位"></el-table-column>
        <el-table-column prop="cellphone" label="联系电话"></el-table-column>
      </el-table>
      <!-- 翻页功能 -->
      <el-pagination
        :total="contactListInfo.total"
        :current-page="contactListInfo.currentPage"
        :page-size="contactListInfo.pageSize"
        @current-change="handlePageChange"
        layout="prev, pager, next,->,total"
      ></el-pagination>
    </el-card>
    <!-- 添加/编辑信息的drawer -->
    <!-- <AddDraw ref="drawRef" :submit="submit" :beforeCloseHook="beforeCloseHook">
      <template #header> 添加联系人 </template>
      <template #body>
        <el-form :model="contactForm" label-width="20%">
          <el-form-item label="姓名">
            <el-input v-model="contactForm.name" placeholder="输入沟通主题"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-select v-model="contactForm.contact" value-key="contactId" placeholder="请选择联系人" filterable>
              <el-option v-for="c in contactList" :key="c.contactId" :label="c.name" :value="c"></el-option>
              <template #empty>
                <el-link type="primary" @click="quickAdd('contact')">联系人不存在，点击添加</el-link>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="沟通日期">
            <el-date-picker v-model="contactForm.date" type="date" placeholder="选择沟通日期" size="default" />
          </el-form-item>
          <el-form-item label="就职公司">
            <el-select v-model="contactForm.organization" value-key="orgId" placeholder="请选择相关机构" filterable>
              <el-option v-for="o in orgList" :key="o.orgId" :label="o.fullname" :value="o"></el-option>
              <template #empty>
                <el-link type="primary" @click="quickAdd('organization')">相关机构不存在，点击添加</el-link>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="其他">
            <el-input
              v-model="contactForm.other"
              placeholder="输入其他内容：可以是喜好、性格等"
              type="textarea"
              :rows="6"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
    </AddDraw> -->
  </div>
</template>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
